<template>
	<div class="top">
		<h3>基础信息</h3>
		<form class="f_top">
			<el-form-item label="车牌号" style="width: 400px;">
				<el-input placeholder="输入车牌号,如湘A66666" />
			</el-form-item>
			<el-form-item label="关联房屋" style="width:420px;margin-right: 10px;margin-bottom: 50px;">
				<el-cascader v-model="lastNumber.xz" :options="options1" :props="props1" clearable />
			</el-form-item>
			<el-form-item label="所属房屋(选填)" style="width: 400px;">
				<el-input placeholder="输入房屋" />
			</el-form-item>
			<el-form-item label="车辆标签(选填)" style="width: 400px;">
				<el-select placeholder="请选择车辆标签">
				</el-select>
			</el-form-item>
			<el-form-item label="备注(选填)" style="width: 400px;">
				<el-input type="textarea" placeholder="备注" />
			</el-form-item>
		</form>
	</div>

	<div class="conmit">
		<el-button class="but1">取消</el-button>
		<el-button class="but2" @click="add">确定</el-button>
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted } from 'vue';
	import { ElMessage } from 'element-plus';
	import $http from '../router/AxiosApi.js';

	const imageUrl = ref(''); // Correct: initializing ref with an empty string

	onMounted(() => {
		loadAll();
	});

	// 使用 reactive 来定义 data
	const data = reactive({
		car: []
	});

	const lastNumber = reactive({
		xz: ''
	});

	const props1 = {
		checkStrictly: true,
	};

	const options1 = reactive([]);

	const loadAll = () => {
		$http.get("Car/selectYardandCar").then((res) => {
			// 假设数据在 res.data.data 数组中
			data.car = res.data.data || []; // 确保 data.car 是数组
			console.log("Fetched car data:", data.car);

			if (Array.isArray(data.car)) {
				// 将数据转换为 cascader 所需的格式
				const regions = data.car.map(car => ({
					value: car.yard_id,
					label: car.yard_name,
					children: [
						{
							value: car.parking_id,
							label: car.parking_num,
						}
					]
				}));
				// 更新 options 数组
				options1.splice(0, options1.length, ...regions);
				console.log("Updated options:", options1);
			} else {
				console.error('Expected data.car to be an array, but it is not.');
			}
		}).catch((error) => {
			console.error('API call failed:', error);
		});
	};

	const add = () => {

	}
</script>
<style>
	.top {
		text-align: left;
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 10px;
	}

	.button {
		text-align: left;
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 16px;
	}

	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}

	.conmit {
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
	}

	.f_top {
		margin-left: 10px;
	}

	.f_button {
		width: 1000px;
	}

	.el-select__wrapper el-tooltip__trigger el-tooltip__trigger {
		height: 40px;
	}

	.el-input {
		height: 40px;

	}

	.el-form-item__label {
		width: 150px;
	}

	.but1 {
		width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0px 20px;
		color: #7e8081;
		background-color: #fafafa;
	}

	.but2 {
		width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0px 20px;
		color: #fff;
		background-color: #80e1b6;
		border-color: #80e1b6;
	}
</style>